<template>
  <div>
    <div class="flex">
      <!-- 各个列表 -->
      <div
        class="item"
      >
        <vuedraggable
          style="width: 100%; min-height: 200px"
          v-model="listData.todo"
          @end="end"
          :group="group.todo"
        >
          <div
            class="one"
            v-for="(item, index) in listData.todo"
            :key='index'
            @click='detail(item)'
            :state='item.state'
          >
            <el-row>
              <el-col
                :span='12'
                class="title ta-r"
              >{{ levelLogo.todo[item.level] }}{{ item.title }}</el-col>
              <el-col
                :span='12'
                class="mt5"
                v-if="item.startDate"
              >🕝{{ item.startDate }}<el-divider direction="vertical"></el-divider>{{item.time}}</el-col>
            </el-row>
            <el-divider content-position="left">{{item.deadline}}</el-divider>
            <el-row>
              <el-col
                :span='10'
                class="text ta-r"
              >💬:{{ item.describe }}</el-col>
              <el-col :span='8'>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    👁‍🗨操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="deleteIt(item, index)">删除</el-dropdown-item>
                    <el-dropdown-item @click.native="update(item, index)">修改</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </div>
        </vuedraggable>
      </div>
      <!-- pending -->
      <!-- <h2>pending</h2> -->
      <div
        class="item"
      >
        <vuedraggable
          style="width: 100%; min-height: 200px"
          v-model="listData.pending"
          @end="end"
          :group="group.pending"
        >
          <div
            class="one"
            v-for="(item, index) in listData.pending"
            :key='index'
            @click='detail(item)'
            :state='item.state'
          >
            <el-row>
              <el-col
                :span='12'
                class="title ta-r"
              >{{ levelLogo.pending[item.level] }}{{ item.title }}</el-col>
              <el-col
                :span='12'
                class="mt5"
                v-if="item.startDate"
              >🕝{{ item.startDate }}<el-divider direction="vertical"></el-divider>{{item.time}}</el-col>
            </el-row>
            <el-divider content-position="left">{{item.deadline}}</el-divider>
            <el-row>
              <el-col
                :span='10'
                class="text ta-r"
              >💬:{{ item.describe }}</el-col>
              <el-col :span='8'>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    👁‍🗨操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="deleteIt(item, index)">删除</el-dropdown-item>
                    <el-dropdown-item @click.native="update(item, index)">修改</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </div>
        </vuedraggable>
      </div>
      <!--  done-->
      <div
        class="item"
      >
        <vuedraggable
          style="width: 100%; min-height: 200px"
          v-model="listData.done"
          @end="end"
          :group="group.done"
        >
          <div
            class="one"
            v-for="(item, index) in listData.done"
            :key='index'
            @click='detail(item)'
            :state='item.state'
          >
            <el-row>
              <el-col
                :span='12'
                class="title ta-r"
              >{{ levelLogo.done[item.level] }}{{ item.title }}</el-col>
              <el-col
                :span='12'
                class="mt5"
                v-if="item.startDate"
              >🕝{{ item.startDate }}<el-divider direction="vertical"></el-divider>{{item.time}}</el-col>
            </el-row>
            <el-divider content-position="left">{{item.deadline}}</el-divider>
            <el-row>
              <el-col
                :span='10'
                class="text ta-r"
              >💬:{{ item.describe }}</el-col>
              <el-col :span='8'>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    👁‍🗨操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="deleteIt(item, index)">删除</el-dropdown-item>
                    <el-dropdown-item @click.native="update(item, index)">修改</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </div>
        </vuedraggable>
      </div>
    </div>
    <!-- 详情页 -->
    <detail
      ref="detail"
      v-show='showDetail'
    ></detail>
    <!-- 修改弹窗 -->
    <newDialogVue ref="newDialogVue"></newDialogVue>
  </div>
</template>

<script>
import newDialogVue from '@/views/newDialog.vue'
import vuedraggable from 'vuedraggable';
import fs from 'fs'
import detail from '@/views/detail.vue'
export default {
  components: { detail, newDialogVue, vuedraggable },
  data () {
    return {
      showDetail: false,
      levelLogo: {
        todo: {
          "p1": '1️⃣🙀',
          "p2": '2️⃣😾',
          "p3": '3️⃣😼',
          "p4": '4️⃣😻',
        },
        pending: {
          "p1": '1️⃣🙈',
          "p2": '2️⃣🙉',
          "p3": '3️⃣🙊',
          "p4": '4️⃣🐵',
        },
        done: {
          "p1": '1️⃣🏆',
          "p2": '2️⃣🥇',
          "p3": '3️⃣🥈',
          "p4": '4️⃣🥉',
        }
      },
      group: {
        todo: {
          name: "drag",
          pull: true,  //可以拖出
          put: true,   //可以拖入
        },
        pending: {
          name: "drag",
          pull: true,  //可以拖出
          put: true,   //可以拖入
        },
        done: {
          name: "drag",
          pull: true,  //可以拖出
          put: true,   //可以拖入
        },
      },
      listData: {
        todo: [],
        pending: [],
        done: [],
      },
      encourage: {
        0: '你还是那么优秀',
        1: '任务完成了，想想一会吃点什么？',
        2: '要是方便的话可以去休息一下了🎏',
        3: '找时间去陪陪你在乎和在乎你的人',
        4: '这就是高效能人士吗，很强',
        5: '奖励下自己吧',
        6: '祝你今天有个好的心情',
        7: '记得享受当下',
        8: '去听听音乐？',
        9: "摸会鱼奖励下自己",
        10: '喝杯奶茶或者喝点什么？',
        11: '记得按时吃饭',
        12: '注意不要久坐',
        13: '多喝热水☕',
        14: 'good job',
        15: '幸亏联想有你',
        16: '干的漂亮，团队骨干',
        17: '牛逼！',
        18: '*★,°*:.☆(￣▽￣)/$:*.°★* 。',
        19: '你真的很强',
        20: '我卢本伟没有开挂',
        21: '你好像更好看了',
        22: '再接再厉',
        23: '感觉升职加薪不远了',
        24: '你想要的都在朝你赶来',
        // 25: "我这文化水平编不出更多句子了，总之这是在鼓励你，继续加油"
      }
    };
  },
  methods: {
    init (data) {
      this.listData.todo = data.todo || []
      this.listData.pending = data.pending || []
      this.listData.done = data.done || []
    },
    remainingDate (date) {

    },
    detail (item) {
      this.showDetail = true
      this.$refs.detail.init(item)
    },
    reStart (item, index) {
      this.listData[item.state].splice(index, 1)
      this.listData.todo.push(item)
      this.reWrite()
    },
    next (item, index) {
      if (item.state === 'todo') {
        this.listData.todo.splice(index, 1)
        this.listData.pending.push(item)
      } else if (item.state === 'pending') {
        this.listData.pending.splice(index, 1)
        this.listData.done.push(item)
      }
      this.isDone(item)
      this.reWrite()
    },
    back (item, index) {
      if (item.state === 'pending') {
        this.listData.todo.push(item)
        this.listData.pending.splice(index, 1)
      } else if (item.state === 'done') {
        this.listData.pending.push(item)
        this.listData.done.splice(index, 1)
      }
      this.reWrite()
    },
    deleteIt (item, index) {
      this.listData[item.state].splice(index, 1)
      this.reWrite()
    },
    update (item, index) {
      this.$refs.newDialogVue.updateInit(item)
    },
    done (item, index) {
      this.listData[item.state].splice(index, 1)
      this.listData.done.push(item)
      this.isDone(item)
      this.reWrite()
    },
    isDone (item) {
      if (item.state !== 'done') return
      let max = Math.floor(Math.random() * (Object.keys(this.encourage).length))
      this.$message.success(this.encourage[max])
    },
    reWrite () {
      this.listData.todo.map(item => item.state = 'todo')
      this.listData.pending.map(item => item.state = 'pending')
      this.listData.done.map(item => item.state = 'done')
      fs.writeFileSync('./joe.json', JSON.stringify(this.listData));
    },
    end ({ to, from, item, clone, oldIndex, newIndex }) {
      if (to.childNodes[0].getAttribute('state') === 'done') {
        let max = Math.floor(Math.random() * (Object.keys(this.encourage).length))
        this.$message.success(this.encourage[max])
      }
      this.reWrite()
    },

  }
}
</script>

<style lang='scss' scoped>
.inline-block {
  display: inline-block;
}

.text {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ta-r{
  text-align: left;
}
.title {
  width: 180px;
  overflow: hidden;
  margin-top: 5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt5{
  margin-top:5px;
}
.flex {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: space-around;

  .item {
    // height: 600px;
    width: 30%;
    display: inline-block;
    min-height: 200px;
    // background-color: red;
    box-shadow: 10px 10px 20px 10px #EBEEF5;
    margin-bottom: 30px;

    .one {
      color: #000;
      width: 100%;
      height: 110px;
      min-height: 110px;
      // border: 3px transparent solid;
      border-radius: 10px;
      border-width: 3px 1px 1px 3px;
      border-image: linear-gradient(to right, #908399, Transparent) 1 10;
      box-shadow: 10px 10px 10px 10px #EBEEF5;
      margin-bottom:18px;
      .pieces {
        transform: scale(1.6, 1.6);
        margin-left: -80%;
        margin-top: 10px;
      }
    }
  }
}
</style>